<template>
    <a-modal :title="$t('Clone')+' '+$t('Snap')" v-model='clone' @cancel='cancelhandle' width='35%' @ok='clonesub' :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosabel='false' v-dragModal>
        <a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
        <a-form :form='form'>
            <a-form-item :label="$t('Clone')+'from'+$t('Snap')"  v-bind='formlayout'>
                <a-input  :value="tarname ? tarname.pool_name +'/'+ tarname.block_name : ''" disabled></a-input>
            </a-form-item>
            <a-form-item :label="$t('New')+$t('Block-name')" v-bind='formlayout'>
                <a-input v-decorator="['replica_block',{
                    rules:[{required:true,message:$t('Choose')+$t('New')+$t('Block-name')},
                    {pattern:namePattern,message:$t('Not_enter_special_characters')}]
                }]" ></a-input>
            </a-form-item>
            <a-form-item :label="$t('Pool')+$t('Name')" v-bind="formlayout">
                <a-select v-decorator="['replica_pool',{
                    rules:[{required:true,message:$t('Choose')+$t('Pool')+$t('Name')}]
                }]">
                    <!-- <a-select-option v-for="(item,index) in $store.state.baseblock.rbd_pool" :value='item' :key="index"> -->
                    <a-select-option v-for="item in $store.state.baseblock" :value='item.poolnum' :key="item.poolname">
                        {{item.poolname}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <!--专用数据存储池-->
            <!-- <a-form-item v-bind="formlayout">
                <a-row>
                    <a-col :span='14' :offset='10'>
                        <a-checkbox @change="onChange" :checked="check" v-decorator="['special']">
                           {{$t('Use')}}{{$t('Dedicated')}}
                        </a-checkbox>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item :label="$t('Data-pool')" v-bind="formlayout" v-if='check'>
                <a-select v-decorator="['replica_data_pool',{
                    rules:[{required:true,message:$t('Choose')+$t('Data-pool')}]
                }]">
                    <a-select-option v-for="(item,index) in $store.state.baseblock.data_pool" :value='item' :key="index">
                        {{item}}
                    </a-select-option>  
                </a-select>
            </a-form-item> -->
            <a-form-item :label="$t('Block-size')" v-bind='formlayout'>
                <a-row>
                    <a-col :span='12'>
                        <a-input-number v-decorator="['size',{
                            rules:[{required:true,message:$t('Enter')+$t('Block-size')}],initialValue:oldsize
                        }]" disabled>
                        </a-input-number>
                    </a-col>
                    <a-col :span='12'>
                        <a-select v-decorator="['unit',{
                            rules:[{required:true,message:$t('Choose')+'unit'}],initialValue:oldunit
                        }]" disabled>
                            <a-select-option v-for='u in uint ' :key='u.val'>{{u.label}}</a-select-option>
                        </a-select>
                    </a-col>
                </a-row>
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
import request from '@/request/request'

export default {
    name:'clonesnap',
    props:['cc','tarname'],
    data(){
        return{
            form:this.$form.createForm(this),
            clone:false,
            formlayout:{
                labelCol:{span:6},
                wrapperCol:{span:14}
            },
            uint:[{val:'KiB',label:'KiB'},{val:'MiB',label:'MiB'},{val:'GiB',label:'GiB'},{val:'TiB',label:'TiB'}],
            oldunit:'',
            oldsize:'',
            // oldpool:'',
            // oldblock:'',
            spinning:false,
            check:false
        }
    },
    watch:{
        cc(val){
            this.clone=val
            this.part()  //监听到局部变量的变化而变化
        }
    },
    methods:{
        cancelhandle(e){
            // this.clone=false
            this.spinning = false
            this.check = false
            this.$emit('omodal',false, true)
            this.form.resetFields();
        },
        clonesub(e){
            e.preventDefault();
            this.form.validateFields((err,value)=>{
                if(!err){
                    this.spinning = true
                    request('post', 'block/snap/clone',{
                        src_pool_id: this.tarname.pool_id, //原块设备的池id
                        src_image_id: this.tarname.image_id, //原块设备id
                        snapshot_id: this.tarname.id, //快照编号
                        dest_image_name: value.replica_block, //克隆后的名称
                        dest_pool_id: value.replica_pool, //所属存储池
                        old_pool_name: this.tarname.pool_name,  //原池名
                        old_block_name: this.tarname.block_name, //原块设备名
                        snapshot_name: this.tarname.name //原快照名

                        // origin_pool:this.tarname.pool_name,
                    	// origin_block:this.tarname.block_name,
						// name:this.tarname.name,
						// replica_pool:value.replica_pool,
                        // replica_block:value.replica_block,
                        // replica_data_pool:value.replica_data_pool
                    }).then(res=>{
                        // console.log('克隆快照操作', res)
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
                        // this.gettask()  //任务栏信息
                        this.spinning = false
                        // this.clone=false
                        this.check = false
			            this.$emit('omodal',false, false)
			            this.form.resetFields();
                        this.$store.commit('toRefreshBlockList',!this.$store.state.isRefreshBlockList);
                        this.$store.commit('toGetBlockData',!this.$store.state.isBlockListChange);
                    }).catch(err => {
                        this.spinning = false;
                        this.check = false;
			            this.$emit('omodal',false, false);
			            this.form.resetFields();
                    })
                }
            })
        },
        onChange(e){
            this.check = !this.check
        },
        part(){ //对容量进行 数值 和 单位的划分
        	this.change = this.tarname
    		this.oldsize = this.change.size.split(' ')[0]
    		this.oldunit = this.change.size.split(' ')[1]
        }
    }
}
</script>